<!-- 分页结果 -->
<!--分页-->
<template>
  <div class="margin-top-20 page-result">
    <!--<el-card class="margin-top-20" v-for="i in 7" :key="i">-->
<!---->
    <el-card class="margin-top-20">          
      <div style="display: flex; justify-content: flex-end">
        <div
          style="
            display: flex;
            justify-content: space-between;
            width: 100%;
            cursor: pointer;
          "
        >
        
          <div style="display: flex; justify-content: flex-start">
            
            <div class="up-info__avatar">
 

              <a href="./CoreList.vue#c1" target="_blank" class="anchor">
                <img
                  src="http://pics0.baidu.com/feed/574e9258d109b3de7694cc410288bd87800a4caa.jpeg"
                  
                  width="185px"
                  height="90px"
                  style="margin-leif:150px;"
                />
              </a>
              <div class="time">01:13</div>
            </div>
          
            <div  class="up-info__info">
              <div>
                <span class="font-bolder">小鬼演唱会疑似被鬼屋附身</span>
              </div>
              <div><span>简介</span><span>微博 太哈人了</span></div>
              <div class="info-list-name">
                西姆斯饼饼 | 2021-06-01 11:30:26 发布
              </div>
              

            </div>
        </div>


      </div>     
      </div>             
    </el-card>


<el-card class="margin-top-20">
  <!--一级分类-->
        
      <div style="display: flex; justify-content: flex-end width:60px;height:70px"><!--留-->
        <div
          style="
            display: flex;
            justify-content: space-between;
            width: 100%;
            cursor: pointer;
          "
        ><!--留-->
        <table class="total-table">
          <tr>
            <td style="width:100px;">核心一览</td>
            
            <td style="width:100px;">爆款分析</td>
          
            <td style="width:100px;">评论分析</td>
        
            <td style="width:100px;">弹幕分析</td>
            
            <td style="width:100px;">观众画像</td>
                      

          </tr>
        </table>    
        </div>
    

      </div>
       

    <div class="line-1px" />
      <div style="display: flex; justify-content: space-around">
        
        <table>
          <tr style="width:0px;">
            <td style="width:1000px;">性别分布</td>   
            
            <td style="width:900px;">年龄分布</td>            
                 
          </tr>
        </table>
        
      </div>
 <!--条形图-->    




 <el-card class="margin-top-20"> 

    <div class="line-1px" />

      <div style="display: flex; justify-content: space-around">

        
      

        <div id="main" style="width: 1000px;height:500px;" ></div>

      <!--</div>-->
      </div>




 </el-card>


<!--end-->



    

<!--end-->    
      </el-card>




<!--e分页5-->

<el-card class="margin-top-20">
         
      <div style="display: flex; justify-content: flex-end">
        <div
          style="
            display: flex;
            justify-content: space-between;
            width: 100%;
            cursor: pointer;
          ">

       <table class="total-table">
          


        </table>  

        </div>

      </div>
    </el-card>

<!---->


  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "",
  data: function () {
    return {
 
    };
  },

  components: {},

  computed: {},

  mounted: function () {
    this.line()
  },

  methods: {
    
    //第一个图
    line(){
var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;

//第一个条形图
var builderJson = {
  "all":10000,
  "charts": {
    "lv 2": "316",
    "lv 3": "1275",
    "lv 4": "3321",
    "lv 5": "4760",
    "lv 6": "328",
   
  },
  //第二个条形图
  "components": {
    "lv 12": 13,
    "lv 4": 25,
    "lv 3": 38,
    "lv 2": 290,
    "lv 1": 505,
    "lv 0": 9126,
    
  },
  "ie": 9743
};

var downloadJson = {
  "女": 45,
  "男": 55,
  
};

var themeJson = {
  "25-30": 1594,
  "36-40": 925,
  "31-35": 1608,
  "41+": 721,
  "18-24": 2179,
  "6-17": 1982
};

var waterMarkText = 'ECHARTS';

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = 100;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.globalAlpha = 0.08;
ctx.font = '20px Microsoft Yahei';
ctx.translate(50, 50);
ctx.rotate(-Math.PI / 4);
ctx.fillText(waterMarkText, 0, 0);

option = {
    backgroundColor: {
        type: 'pattern',
        image: canvas,
        repeat: 'repeat'
    },
    tooltip: {},
    title: [{
        text: '粉丝等级',
        subtext: '粉丝勋章 ' + builderJson.all,
        left: '25%',
        textAlign: 'center'
    }, {



        text: '性别分布',
        
        left: '75%',
        textAlign: 'center'
    }, {
        text: '年龄分布',
        
        left: '75%',
        top: '50%',
        textAlign: 'center'
    }],
    grid: [{
        top: 50,
        width: '50%',
        bottom: '45%',
        left: 10,
        containLabel: true
    }, {
        top: '55%',
        width: '50%',
        bottom: 0,
        left: 10,
        containLabel: true
    }],
    xAxis: [{
        type: 'value',
        max: builderJson.all,
        splitLine: {
            show: false
        }
    }, {
        type: 'value',
        max: builderJson.all,
        gridIndex: 1,
        splitLine: {
            show: false
        }
    }],
    yAxis: [{
        type: 'category',
        data: Object.keys(builderJson.charts),
        axisLabel: {
            interval: 0,
            rotate: 30
        },
        splitLine: {
            show: false
        }
    }, {
        gridIndex: 1,
        type: 'category',
        data: Object.keys(builderJson.components),
        axisLabel: {
            interval: 0,
            rotate: 30
        },
        splitLine: {
            show: false
        }
    }],
    series: [{
        type: 'bar',
        stack: 'chart',
        z: 3,
        label: {
            position: 'right',
            show: true
        },
        data: Object.keys(builderJson.charts).map(function (key) {
            return builderJson.charts[key];
        })
    }, {
        type: 'bar',
        stack: 'chart',
        silent: true,
        itemStyle: {
            color: '#eee'
        },
        data: Object.keys(builderJson.charts).map(function (key) {
            return builderJson.all - builderJson.charts[key];
        })
    }, {
        type: 'bar',
        stack: 'component',
        xAxisIndex: 1,
        yAxisIndex: 1,
        z: 3,
        label: {
            position: 'right',
            show: true
        },
        data: Object.keys(builderJson.components).map(function (key) {
            return builderJson.components[key];
        })
    }, {
        type: 'bar',
        stack: 'component',
        silent: true,
        xAxisIndex: 1,
        yAxisIndex: 1,
        itemStyle: {
            color: '#eee'
        },
        data: Object.keys(builderJson.components).map(function (key) {
            return builderJson.all - builderJson.components[key];
        })
    }, {
        type: 'pie',
        radius: [0, '30%'],
        center: ['75%', '25%'],
        data: Object.keys(downloadJson).map(function (key) {
            return {
                name: key.replace('.js', ''),
                value: downloadJson[key]
            };
        })
    }, {
        type: 'pie',
        radius: [0, '30%'],
        center: ['75%', '75%'],
        data: Object.keys(themeJson).map(function (key) {
            return {
                name: key.replace('.js', ''),
                value: themeJson[key]
            };
        })
    }]
    
};

option && myChart.setOption(option);

//第二个图


//到此结束
  
    
    }
  
  },
};
</script>
<style lang="scss" scoped>

.page-result {
  height: 1000px;

  .column-1px {
    border-left: 1px solid #f6f7fb;
    margin: 0 20px;
    height: 120px;
  }
  .up-info__avatar {
    width: 184px;
    height: 115px;
    position: relative;

    margin-right: 16px;
    border-radius: 2px;
    text-align: center;

    .time {
      color: #999;
      margin-top: 10px;
      display: block;
      width: 39px;
      height: 17px;
      background: #000;
      background: rgba(0, 0, 0, 0.7);
      border-radius: 2px 0 2px 0;
      color: #fff;
      font-size: 12px;
      text-align: center;
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
  .up-info__info {
    height: 120px;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    margin-left: 10px;
    .info-list-name {
    }
    .tagList {
      text-align: left;
      display: flex;
      flex-wrap: wrap;
      margin-right: -4px;
      .tag {
        color: #909399;
        border: 1px solid #ebeef5;
        border-radius: 4px;
        margin-right: 4px;
        margin-bottom: 4px;
        text-align: center;
        padding: 1px 3px;
      }
    }
  }
}
</style>
